-
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jq购物车效果2</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/cart.css" />
</head>

<body>
    <div id="main" class="hander-car">
        <div class="store-content">
            <div class="cart-box">
                <div class="title">
                    <h2>购物清单</h2>
                </div>
                <div class="cart-inner">
                    <div>
                        <div class="cart-table-title">
                            <span class="name">商品信息</span>
                            <span class="operation">操作</span>
                            <span class="subtotal">小计</span>
                            <span class="num">数量</span>
                            <span class="price">单价</span>
                        </div>
                        <div class="cart-table">
                            <div class="cart-group">
                                <!--购物列表-->
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <!-- 勾选商品  选中：checkbox-on -->
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <!-- 小计 -->
                                        <div class="subtotal">¥ 49.00</div>
                                        <!-- 件数的操作 -->
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="1" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <!-- 单价 -->
                                        <div class="price">¥ 100.00</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="1" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 200</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="10" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 49.00</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="2" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 58.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-bottom-bg fix-bottom">
                    <div class="cart-bar-operation">
                        <div>
                            <div class="choose-all js-choose-all">
                                <span class="blue-checkbox-new" id="chooseall"><a></a></span>
                                全选
                            </div>
                            <!-- <div class="delete-choose-goods">删除选中的商品</div> -->
                        </div>
                    </div>
                    <div class="shipping">
                        <div class="shipping-box">
                            <div class="shipping-total shipping-num">
                                <h4 class="">
                                    已选择 <i id="yixuan">0</i> 件商品
                                </h4>
                                <h5>
                                    共计 <i id="gongji">0</i> 件商品
                                </h5>
                            </div>
                            <div class="shipping-total shipping-price">
                                <h4 class="">
                                    应付总额：<span>￥</span><i class="moneyall">0</i>
                                </h4>
                                <h5 class="shipping-tips">
                                    应付总额不含运费
                                </h5>

                            </div>
                        </div>
                        <span class="jianguo-blue-main-btn big-main-btn js-checkout disabled-btn"><a>现在结算</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        //如果单选按钮有一个亮，则结算按钮亮
        function jscheckout() {
            let result = $.makeArray($('.cart-group .blue-checkbox-new')).some(item => {
                return item.classList.contains('checkbox-on')
            })
            if (result) {
                $('.js-checkout').removeClass('disabled-btn');
            } else {
                $('.js-checkout').addClass('disabled-btn');
                $('#yixuan').html(0)
                $('.moneyall').html(0)
            }
        }
        //单选事件
        $('.cart-group .blue-checkbox-new').click(function () {
            $(this).toggleClass('checkbox-on');
            jscheckout()
            let allchoose = $.makeArray($('.cart-group .blue-checkbox-new')).every(item => {
                return item.classList.contains('checkbox-on')
            })
            if (allchoose) {
                $('#chooseall').addClass('checkbox-on')
            } else {
                $('#chooseall').removeClass('checkbox-on')
             }    
           myshi()
            
        })
        //全选事件
        $('#chooseall').click(function (e) {
            $(this).toggleClass('checkbox-on');
            if ($('#chooseall').hasClass('checkbox-on')) {
                $('.cart-group .blue-checkbox-new').addClass('checkbox-on')
            } else {
                $('.cart-group .blue-checkbox-new').removeClass('checkbox-on')
            }
            jscheckout()
            myshi()
        });
        //初始化，遍历input
        $('.num input').each(function (index, item) {
            // item == this
            if ($(this).val() === '1') {
                $('.down').eq(index).addClass('down-disabled')
            } else {
                $('.down').eq(index).removeClass('down-disabled')
            }
            if ($(this).val() === '10') {
                $('.up').eq(index).addClass('up-disabled')
            } else {
                $('.up').eq(index).removeClass('up-disabled')
            }
            let danjia = $('div.price').eq(index).html().slice(1).trim()
            let shuliang = $(this).val()
            let xiaoji = Number(danjia) * Number(shuliang)
            $('div.subtotal').eq(index).html('￥' + xiaoji.toFixed(2))
        });
        //加按钮的点击事件
        $('.up').click(function (e) {
            let num = $('.up').index(this)
            let text = $('.num input').eq(num).val()
            text++
            if (text > 10) {
                text = 10
                $(this).addClass('up-disabled');
            }
            if (text > 1) {
                $('.down').eq(num).removeClass('down-disabled')
            }
            $('.num input').eq(num).val(text)
            let danjia = $('div.price').eq(num).html().slice(1).trim()
            let xiaoji = Number(danjia) * Number(text)
            $('div.subtotal').eq(num).html('￥' + xiaoji.toFixed(2))
            //共计的数量
            allNumFn()
            myshi()
        });
        //减按钮的点击事件
        $('.down').click(function (e) {
            let num = $('.down').index(this)
            let text = $('.num input').eq(num).val()
            text--
            if (text < 1) {
                text = 1
                $(this).addClass('down-disabled');
            }
            if (text < 10) {
                $('.up').eq(num).removeClass('up-disabled');
            }
            $('.num input').eq(num).val(text)
            let danjia = $('div.price').eq(num).html().slice(1).trim()
            let xiaoji = Number(danjia) * Number(text)
            $('div.subtotal').eq(num).html('￥' + xiaoji.toFixed(2))
            //共计的数量
            allNumFn()
            myshi()
        });
        //共计的数量
        function allNumFn() {
            let allnum = $.makeArray($('.num input')).reduce((a, b) => {
                return a + Number(b.value)
            }, 0)
            $('#gongji').html(allnum);
        }
        allNumFn()

        //已选的数量

        // function myshi() {
        //     let myzz = 0
        //     let mynumzz = 0
        //     //遍历所有地单选按钮
        //     $('.cart-group .blue-checkbox-new').each(function (index, item) {
        //         let result = $(this).hasClass('checkbox-on')
        //         if (result) {
        //             //已选数量
        //             myzz += Number($('.num input').eq(index).val())
        //             $('#yixuan').html(myzz)
        //             //应付总额
        //             let danjiaz = $('.cart-group .price').eq(index).html().slice(1).trim()
        //             let shuliang = $('.num input').eq(index).val()
        //             mynumzz += Number(danjiaz)*Number(shuliang)
        //             $('.moneyall').html(mynumzz)
        //         }
        //     })
        // }
        function  myshi() {
            let num = 0
            let myzz = 0
            $('.cart-group .blue-checkbox-new').each(function (index, item) {
                if($(this).hasClass('checkbox-on')){
                    num += Number($('.num input').eq(index).val())
                    $('#yixuan').html(num)
                    let danjiaz = $('div .price').eq(index).html().slice(1).trim()
                    
                    let shuliang = $('.num input').eq(index).val()
                    myzz += Number(danjiaz)*Number(shuliang)
                      $('.moneyall').html(myzz)
                }
            });  
           
          
        }
    </script>



    /**
    选中: checkbox-on
    结算按钮样式: disabled-btn
    加减按钮禁用：down-disabled
    */

</body>

</html>